<template>
  <div class="log-table">
    <slot name="search"></slot>
    <div class="table-box">
      <vxe-table
        align="center"
        size="medium"
        highlight-hover-row
        resizable
        border
        stripe
        :data="source"
        :header-cell-class-name="headerStyle"
        :row-class-name="rowClass"
        height="100%"
        class="table-con">
        <vxe-column type="seq" title="序号" width="60" class-name="drag-btn"></vxe-column>
        <vxe-column field="postName" title="职位名称" min-width="160" class-name="drag-btn"></vxe-column>
        <vxe-column field="postLevelName" title="职级序列" min-width="160"></vxe-column>
        <vxe-column field="realtionRoleCount" title="人员数量" min-width="160"></vxe-column>
        <vxe-column field="createTime" title="创建时间" sortable width="180"></vxe-column>
        <vxe-column field="oper" fixed="right" title="操作" width="120">
          <template #default="{ row }">
            <div>
              <el-button type="text" style="color: #2b78f1" @click.stop="editAccount(row)">编辑</el-button>
              <el-button type="text" style="color: #2b78f1" @click="onDel(row)">删除</el-button>
            </div>
          </template>
        </vxe-column>
      </vxe-table>
    </div>
    <slot name="pagination"></slot>
  </div>
</template>
<script>
import { USER_STATUS } from '@utility/dict.js'
export default {
  name: 'LogTable',
  emits: ['del-account', 'edit-account', 'import-account', 'update-account'],
  props: {
    source: {
      type: Array,
      default: () => [],
    },
    postCode: {
      type: String,
      default: 'INDEX_KHZT',
    },
  },
  data() {
    return {
      statusTags: USER_STATUS._tag,
    }
  },
  filters: {
    filterCode(key) {
      if (key === 'INDEX_KHZT') {
        return '工作人员'
      } else {
        return '单位工作人员'
      }
    },
    filterUserStatus(status) {
      if (status) {
        return USER_STATUS[status]
      } else {
        return '--'
      }
    },
  },
  methods: {
    /* 头部样式 */
    headerStyle({ row, column, rowIndex, columnIndex }) {
      return 'headerStyle'
    },
    rowClass({ row, rowIndex }) {
      return 'rowClass'
    },
    delAccount(type, row) {
      // 删除账号的同时也会将关联的机构删除，请谨慎操作
      const userId = localStorage.pskh_userId || JSON.parse(localStorage.PSKH_USERINFO)?.userId
      let delTips = ''
      if (row.id === userId) {
        delTips = '确定删除当前登录账号？删除登录账号后系统会自动退出！'
      } else {
        delTips = '确定删除该账号？'
      }
      this.$confirm(delTips, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('del-account', row, userId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
          })
        })
    },
    editAccount(row) {
      this.$emit('edit-account', row)
    },
    onDel(row) {
      this.$confirm('确定删除该职位吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$emit('del-account', row)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '取消删除',
          })
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.log-table {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .search-box {
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .search-left {
      display: flex;
      align-items: center;
      width: 70%;
      .search-item {
        max-width: 240px;
      }
      .search-item + .search-item {
        margin-left: 20px;
      }
      .search-inp {
        width: 240px;
      }
      .el-icon-search {
        cursor: pointer;
      }
    }
  }

  .table-box {
    flex: 1;
    position: relative;

    .table-con {
      ::v-deep .headerStyle {
        background-color: #f0f4f9;

        .vxe-cell {
          color: #333333;
          font-size: 14px;

          span {
            font-weight: 600;
          }
        }
      }

      ::v-deep .rowClass {
        .vxe-cell {
          color: #666666;
          font-size: 14px;

          p,
          div,
          span {
            font-size: 14px;
          }
        }
      }
    }
  }

  .bg-pagination {
    margin-top: 10px;
  }
}
</style>
